/* SPDX-License-Identifier: Apache-2.0 */

/*
  A dropdown - containing a trigger and dropdown content, which may include
  links.

  <nav class="dropdown" aria-label="Dropdown label">
    <button type="button" class="dropdown__trigger" aria-haspopup="true" aria-expanded="false" aria-label="button label">
      // Button text or icon
    </button>
    <ul class="dropdown__content" aria-hidden="true" aria-label="Main menu">
      <li>
        <a class="dropdown__link" href="url">
          // Link text
        </a>
      </li>
    </ul>
  </nav>

  Accessbility:
    - .dropdown - aria-label: label the entire dropdown. E.g. "Main navigation"
    - .dropdown__trigger - aria-label: label the button. E.g. "Show menu"
    - .dropdown__trigger - aria-haspopup: indicates that the button has a popup element attached
    - .dropdown__trigger - aria-expended: indicates whether or not the popup is expanded
    - .dropdown__content - aria-hidden: indicates whether or not list is hidden
    - .dropdown__content - aria-label: labels the content. E.g. "Main menu"

  Modifiers:
    - on-menu: Styles the dropdown to match the site header
    - with-icons: Adds extra padding to link to allow space for icons
    - wide: Makes the dropdown wider to allow space for longer labels
 */

.dropdown {
  position: relative;
  display: inline-block;

  ul,
  li {
    margin: 0;
    padding: 0;
    list-style-type: none;
  }

  &__trigger {
    cursor: pointer;
    white-space: nowrap;
  }

  &__trigger-caret,
  &__trigger-caret:hover {
    margin-left: 5px;
    text-decoration: none;
  }

  &__content {
    position: absolute;
    right: 0;
    margin-bottom: -4px;
    box-shadow: 1px 1px 2px 1px rgb(0 0 0 / 5%);
    z-index: index($z-index-scale, "dropdown");
    border: 1px solid $border-color;
    border-bottom: 0; // Each link has a bottom border, so we don't need one here
    display: none;
  }

  &__link,
  button.dropdown__link {
    display: block;
    padding: 15px;
    border: 0; // Remove default border on buttons
    border-bottom: 1px solid $border-color;
    background-color: $white;
    min-width: 180px;
    color: $text-color;
    cursor: pointer;
    text-align: left;
    position: relative;
    @include link-without-underline;

    &:hover,
    &:active,
    &:focus {
      background-color: mix($white, $primary-color-light, 90%);
      color: $primary-color-dark;
    }

    &:active,
    &:focus {
      outline: 1px solid $primary-color;
      border-bottom-color: $primary-color;
    }

    .fa {
      font-size: 15px;
      position: absolute;
      left: 15px;
      top: calc(50% - 7px);
    }

    .fa-lg {
      font-size: 17px;
    }
  }

  &--on-menu {
    // Remove form styling
    form,
    button {
      border: 0;
      background-color: transparent;
      padding: 0;
    }

    .dropdown__content {
      border-color: $header-border-color;
      margin-bottom: 0;
    }

    .dropdown__link,
    button.dropdown__link {
      border-bottom-color: $header-border-color;
      background-color: $header-background-color;
      color: $white;

      a {
        color: $white;
        text-decoration: none;
      }

      &:hover,
      &:active,
      &:focus {
        background-color: darken($header-background-color, 1.5);
        color: $white;
      }

      &:focus {
        outline: 1px solid $white;
        border-bottom-color: $white;
      }
    }
  }

  &--with-icons {
    .dropdown__link,
    button.dropdown__link {
      padding: 15px 15px 15px 40px;
    }
  }

  &--wide {
    .dropdown__link,
    button.dropdown__link {
      min-width: 200px;
    }
  }
}
